<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换货申请-待收货</title>
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/tuihuo/tongyong1.css">
</head>

<body>


        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <p>换货单号<span>HH844440620</span></p>
                    <h2>待收货</h2>
                     <button type="button" id="btn1" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        确认收货
                      </button>
                 
                </div>
                <div class="col-md-9">
                    <img src="./img/1.png" alt="">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <h4>换货商品</h4>
            </div>
            <div class="row">
                <div class="col-md-5">
                    <div>
                        商品信息
                    </div>
                    <div>
                        <div class="left">
                            <img src="../../lib/img/tp.png" alt="">
                        </div>
                        <div class="left">
                            <h5>商品名称</h5>
                            <p>颜色：红色 &nbsp; 尺码：S</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-1">
                    <div>单价</div>
                    <div>￥135.00</div>
                </div>
                <div class="col-md-1">
                    <div>数量</div>
                    <div>1</div>
                </div>
                <div class="col-md-1">
                    <div>小计</div>
                    <div>￥135.00</div>
                </div>
                <div class="col-md-2">
                    <div>实付金额</div>
                    <div>￥135.00</div>
                </div>
                <div class="col-md-2">
                    <div>应退金额</div>
                    <div>￥135.00</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1">
                    <div> 换货原因</div>
                    <div>退货描述</div>
                    <div> 退货图片</div>

                </div>
                <div class="col-md-11">
                    <div>商品有瑕疵</div>
                    <div>表面有划痕，感觉不是新商品</div>
                    <div>
                        <img src="../../lib/img/tp.png" alt="">
                        <img src="../../lib/img/tp.png" alt="">
                        <img src="../../lib/img/tp.png" alt="">
                    </div>

                </div>
            </div>
        </div>
        <div class="container">
            <div>
                <ul class="row">
                    <li class="col-md-1" id="fanhui">商品返回信息</li>
                    <li class="col-md-11 " id="fahuo">发货信息</li>
                </ul>
            </div>

         
                <div class="row" id="tianjia">
                    <div class="col-md-2">
                        <div>返回方式</div>
                        <div>换货原因</div>
                        <div>收货地址</div>
                        <div>取件地址</div>
                        <div>联系人</div>
                        <div>手机号</div>
                        <div>申请时间</div>
                        <div>订单号</div>
                    </div>
                    <div class="col-md-10">
                        <div>上门取件</div>
                        <div>商品有瑕疵</div>
                        <div>广东省深圳市南山区西丽街道创客小镇A栋506</div>
                        <div>广东省深圳市南山区西丽街道创客小镇A栋506</div>
                        <div>亮亮</div>
                        <div>185 XXXX 8923</div>
                        <div>2021-12-22 14:58:46</div>
                        <div>09843828380</div>
                    </div>
                </div>
                <div class="row" id="tianjia1">
                    <div class="col-md-2">
                        <div>返回商品快递信息</div>
                        <div>收货地点</div>
                        <div>收货人姓名</div>
                        <div>收货人手机号</div>
                        <div>收货地址</div>
                        <div>详细地址</div>
                        <div>邮政编码</div>
                        <div>备注信息</div>
                    </div>
                    <div class="col-md-10">
                        <div>KD250306 
                            <button type="button" id="btn2" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#chakan">
                                查看快递详情
                              </button>
                        </div>
                        <div>收货地点A</div>
                        <div>杭杭</div>
                        <div>185 XXXX 8923</div>
                        <div>浙江省杭州市萧山区</div>
                        <div>云大道35号605</div>
                        <div>311200</div>
                        <div>————</div>
                    </div>

                </div>
          
           
                <div class="row" id="tianjia2">
                    <!-- <div class="col-md-2">
                        <div>是否已发货</div>
                        <div>收货人</div>
                        <div>手机号</div>
                        <div>收货地址</div>
                    </div>
                    <div class="col-md-10">
                        <div>未发货</div>
                        <div>亮亮</div>
                        <div>185 XXXX 8923</div>
                        <div>广东省深圳市南山区西丽街道创客小镇A栋506</div>
                    </div> -->
                </div>
             
        </div>
<!-- 模态框 -->
<div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            
            <div class="modal-body center1">
              <h3>确认已 <span class="text_blue">收到换货商品</span> ？</h3>
            </div>
            <div class="modal-footer center1">
                <a href="../huanhuoliebiao/huanhuoxinhuo.html"><button type="button" class="btn2 btn btn-default" >确定</button></a>  
                <button type="button" class="btn1 btn btn-primary" data-dismiss="modal">取消</button>
            </div>
          </div>
        </div>
      </div>
    
      <div class="modal fade" id="chakan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
          
            <div class="modal-body">
            <p>2021-12-2718:18:22货物已分配，等待配送</p>
            <p>2021-12-27 17:30:12货物已到达【深圳保税区站】</p>
            <p>2021-12-27 16:55:35货物已完成分拣，离开【惠州惠阳分拣中心】2021-12-27 16:38:01货物已到达【惠州惠阳分拣中心】</p>       
            <p>2021-12-27 10:15:15 货物已完成分拣，离开【杭州外单分拣中心】</p>       
            <p>2021-12-27 09:50:02货物已到达【杭州外单分拣中心】</p>       
            <p>2021-12-27 09:26:33拣货完毕，待出库交付亮亮快递公司，运单号为5302858232565</p>       
            <p>2021-12-27 08:03:28您提交了订单，请等待系统确认</p>       
            </div>
            <div class="modal-footer center1">
              <button type="button" class="btn2 btn btn-default" data-dismiss="modal">确定</button>
             
            </div>
          </div>
        </div>
      </div>
</div>
<script>
    $('#fanhui').click(function(){
        $('#tianjia').replaceWith(`<div class="col-md-2">
                        <div>返回方式</div>
                        <div>换货原因</div>
                        <div>收货地址</div>
                        <div>取件地址</div>
                        <div>联系人</div>
                        <div>手机号</div>
                        <div>申请时间</div>
                        <div>订单号</div>
                    </div>
                    <div class="col-md-10">
                        <div>上门取件</div>
                        <div>商品有瑕疵</div>
                        <div>广东省深圳市南山区西丽街道创客小镇A栋506</div>
                        <div>广东省深圳市南山区西丽街道创客小镇A栋506</div>
                        <div>亮亮</div>
                        <div>185 XXXX 8923</div>
                        <div>2021-12-22 14:58:46</div>
                        <div>09843828380</div>
                    </div>`)
        $('#tianjia1').replaceWith(
            `
            <div class="col-md-2">
                        <div>返回商品快递信息</div>
                        <div>收货地点</div>
                        <div>收货人姓名</div>
                        <div>收货人手机号</div>
                        <div>收货地址</div>
                        <div>详细地址</div>
                        <div>邮政编码</div>
                        <div>备注信息</div>
                    </div>
                    <div class="col-md-10">
                        <div>KD250306 
                            <button type="button" id="btn2" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#chakan">
                                查看快递详情
                              </button>
                        </div>
                        <div>收货地点A</div>
                        <div>杭杭</div>
                        <div>185 XXXX 8923</div>
                        <div>浙江省杭州市萧山区</div>
                        <div>云大道35号605</div>
                        <div>311200</div>
                        <div>————</div>
                    </div>
            `)
        $('#tianjia2').replaceWith(` `)
    })
    $('#fahuo').click(function(){
        $('#tianjia').replaceWith(``)
        $('#tianjia1').replaceWith(` `)
        $('#tianjia2').append(`
                  <div class="col-md-2">
                        <div>是否已发货</div>
                        <div>收货人</div>
                        <div>手机号</div>
                        <div>收货地址</div>
                    </div>
                    <div class="col-md-10">
                        <div>未发货</div>
                        <div>亮亮</div>
                        <div>185 XXXX 8923</div>
                        <div>广东省深圳市南山区西丽街道创客小镇A栋506</div>
                    </div>
        `)
    })
</script>
        
</body>

</html>